<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_015_自定义指令</title>

</head>
<body>
    <div id="app">
       侦听器：用来监听数据data的变化，如果数据发生变化，就会触发侦听器绑定的方法 <br /> 
       当处理异步或比较耗时的可以用侦听器比较方便 <br />
       侦听器关键字：watch<br /> 
       输入框1：<input type="text" v-model="msg1"/> <br />
       输入框2：<input type="text" v-model="msg2"/>
       <div>{{result1}}</div>
       侦听器和计算属性的对比：<br />
       计算属性关键字：computed<br /> 
       输入框3：<input type="text" v-model="msg1"/> <br />
       输入框4：<input type="text" v-model="msg2"/>
       <div>{{hebing}}</div>

    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">

        
        var vm = new Vue({
            el:'#app',
            data:{
                msg1:"yellow",
                msg2:"blue",
                result1:"",
                result2:""
            },
            //计算属性和侦听器的对比
            watch:{
                //监听msg1和msg2,注意：监听的名字要和上面的数据data保持一致，参数val表示：当前属性值的最新值
                msg1:function(val){
                    this.result1 = val + "  " + this.msg2;
                },
                msg2:function(val){
                    this.result1 = this.msg1 + "  " + val;
                }
            },
            //计算属性和侦听器的对比
            computed:{
                hebing:function(){
                    return this.msg1 + "  " + this.msg2;
                }
            }
           
        });

    </script>
</body>

</html></SCRIPT>